<template>
  <div class="followUpTabs">
    <el-button
      type="primary"
      style="margin-bottom: 20px"
      @click="toAddClue('添加', { studentId: props.studentId })"
      v-hasPermi="['sales:clue:distribute']"
      >添加跟进记录</el-button
    >
    <div class="placeholder" v-if="!filteredFollowUpList.length">
      <div class="ph-image"></div>
      <div class="text">尚未填写跟进记录</div>
    </div>
    <div class="main" v-else>
      <div class="followUpTitle">跟进记录</div>
      <el-timeline style="max-width: 800px">
        <el-timeline-item v-for="item in filteredFollowUpList" :key="item.id">
          <div class="followUpBox">
            <div class="info">
              <span>{{ item.creatName }}</span>
              <span>{{ item.contactTime }}</span>
              <span class="type"
                >{{ item.contactName }}-{{ item.phaseName }}</span
              >
            </div>
            <div class="btn">
              <el-button
                link
                type="primary"
                @click="toAddClue('修改', item)"
                :disabled="
                  item.contactName === '其他' && item.phaseName === '更新跟进人'
                "
                v-hasPermi="['sales:clue:distribute']"
                >修改</el-button
              >
              <!-- <el-button
                link
                type="primary"
                @click="toDeleteClue(item.id)"
                v-hasPermi="['sales:clue:distribute']"
                >删除</el-button
              > -->
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <AddFollowUpDialog
      :type="type"
      :isShowDialog="isShowDialog"
      :studentRow="studentRow"
      @update:isShowDialog="updateShowDialog"
      @update:tableList="toGetFollowUpList"
    />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import AddFollowUpDialog from "@/components/StudentCom/addFollowUpDialog.vue";
import {
  followListById,
  followDeleteRecord,
} from "@/api/studentManagement/index.js";
import { ElMessageBox, ElMessage } from "element-plus";

const props = defineProps({
  studentId: {
    type: String,
  },
});

//获取学员跟进记录
const followUpList = reactive([]);
const toGetFollowUpList = async () => {
  try {
    const res = await followListById({ studentId: props.studentId });
    if (res.code == 200) {
      followUpList.splice(0, followUpList.length);
      followUpList.push(...(res.data || []));
    }
  } catch (error) {
    console.error("获取学员跟进记录失败:", error);
  }
};
onMounted(toGetFollowUpList);
const filteredFollowUpList = computed(() => {
  return followUpList.filter((item) => item.contactName);
});
//添加跟进记录
const isShowDialog = ref(false);
const studentRow = ref({});
const type = ref("");

const toAddClue = (newType, row) => {
  isShowDialog.value = true;
  studentRow.value = row;
  type.value = newType;
};
//删除跟进记录
// const toDeleteClue = (ids) => {
//   ElMessageBox.confirm('是否删除', {
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning',
//   })
//     .then(async () => {
//       try {
//         const res = await followDeleteRecord({
//           id: ids,
//         })
//         if (res.code == 200) {
//           toGetFollowUpList()
//           ElMessage({
//             type: 'success',
//             message: '删除成功',
//           })
//         } else {
//           ElMessage({
//             type: 'error',
//             message: '删除失败',
//           })
//         }
//       } catch (error) {
//         console.error('删除失败:', error)
//       }
//     })
//     .catch(() => {
//       ElMessage({
//         type: 'info',
//         message: '已取消删除',
//       })
//     })
// }
const updateShowDialog = (value) => {
  isShowDialog.value = value;
};
</script>

<style lang="scss" scoped>
.followUpTabs {
  .placeholder {
    height: 200px;
    .ph-image {
      width: 240px;
      height: 110px;
      margin: 0 auto;
      background-image: url("@/assets/images/phImage.png"); /* 设置背景图片 */
      background-size: cover; /* 背景图片覆盖整个容器 */
      background-position: center; /* 背景图片居中显示 */
      background-repeat: no-repeat; /* 背景图片不重复 */
    }
    .text {
      text-align: center;
      color: #333;
      font-size: 16px;
    }
  }
  .main {
    .followUpTitle {
      margin-bottom: 15px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.65);
    }
    .followUpBox {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      border: 1px solid #eee;
      .info {
        span {
          margin-right: 20px;
        }
        .type {
          padding: 3px 20px;
          background-color: rgba(59, 189, 170, 0.2);
          color: #3bbdaa;
          border-radius: 15px;
        }
      }
    }
  }
}
</style>
